<template>
	<view class="QS">
		<view class="padding-rpx_25">
			<view class="flex_column_c_c">
				<text class="QS-text large weight">演示示例</text>
			</view>
			<QS-P height="40rpx"></QS-P>
			<view style="background-color: #FFFFFF;border-radius: 10rpx;padding: 25rpx;">
				<QS-Grids :mode="tabs_mode[tabIndex_mode].value" :gridsData="gridsData" :row="tabs[tabIndex].value"
					:col="tabs_col[tabIndex_col].value" iconHeight="80rpx" iconWidth="80rpx"></QS-Grids>
			</view>
			<QS-P height="40rpx"></QS-P>
			<text class="QS-text weight">是否swiper</text>
			<QS-P height="10rpx"></QS-P>
			<QS-Tabs mode="center" backgroundColor="#ffffff" :tabs="tabs_mode" width="700rpx" :tabIndex="tabIndex_mode"
				@click="tabIndex_mode = $event"></QS-Tabs>
			<QS-P height="10rpx"></QS-P>
			<text class="QS-text weight">单行个数</text>
			<QS-P height="10rpx"></QS-P>
			<QS-Tabs mode="center" backgroundColor="#ffffff" :tabs="tabs" width="700rpx" :tabIndex="tabIndex"
				@click="tabIndex = $event"></QS-Tabs>
			<QS-P height="10rpx"></QS-P>
			<text class="QS-text weight">行数(swiper模式下有效)</text>
			<QS-P height="10rpx"></QS-P>
			<QS-Tabs mode="center" backgroundColor="#ffffff" :tabs="tabs_col" width="700rpx" :tabIndex="tabIndex_col"
				@click="tabIndex_col = $event"></QS-Tabs>
			<QS-P height="40rpx"></QS-P>
			<view class="bgColor_ffffff border-radius-rpx_10 padding-rpx_25">
				<view class="flex_row_c_c">
					<text class="QS-text large weight">说明</text>
				</view>
				<QS-P></QS-P>
				<showProps :prop="prop"></showProps>
			</view>
		</view>

		<QS-BackTop></QS-BackTop>
	</view>
</template>

<script>
	import gridProp from '@/uni_modules/QS-UI/components/QS-Grids/props.js';
	export default {
		data() {
			return {
				gridsData: Array(5).fill('').map((_, i) => ({
					img: '/static/logo.png',
					text: '' + i
				})),

				prop: Object.keys(gridProp).map(i => {
					const item = gridProp[i];
					let value = item.default;
					if (typeof value == 'function') value = value();
					return {
						name: i,
						value: value,
						des: item.des
					}
				}).filter(i => i.des),
				tabIndex: 0,
				tabIndex_mode: 0,
				tabIndex_col: 0,
				tabs: [{
						name: '5个',
						value: 5
					},
					{
						name: '4个',
						value: 4
					},
					{
						name: '3个',
						value: 3
					},
				],
				tabs_mode: [{
						name: '否',
						value: ''
					},
					{
						name: '是',
						value: 'swiper'
					},
				],
				tabs_col: [{
						name: '1行',
						value: 1
					},
					{
						name: '2行',
						value: 2
					},
					{
						name: '3行',
						value: 3
					},
				]
			}
		}
	}
</script>

<style>

</style>
